<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<#include "/include/common.ftl">
    <link rel="stylesheet" href="/assets/lib/jqgrid/css/ui.jqgrid.css"/>
    <script type="text/javascript" src="/assets/lib/jqgrid/jquery.jqGrid.js"></script>
    <script type="text/javascript" src="/assets/lib/jqgrid/i18n/grid.locale-cn.js"></script>
</head>
<body>
<div style="margin-left:20px">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'search.htm',
            datatype: "json",
            colModel: [
                {label: 'Category Name', name: 'categoryName', width: 75},
                {label: 'Product Name', name: 'productName', width: 90},
                {label: 'Country', name: 'country', width: 100},
                {label: 'Price', name: 'price', width: 80},
                {label: 'Quantity', name: 'quantity', width: 80, editable: true,
                    editrules:{edithidden:true,required:true,number:true,maxValue:1000}
                }

            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            width: 780,
            height: 200,
            rowNum: 30,
            cellEdit:true,
            //cellsubmit: "clientArray",//编辑列，不保存
            editurl: 'search.htm',
            loadonce: true, // this is just for the demo
            pager: "#jqGridPager",
            editurl: 'clientArray',//编辑完，保存
        });
    });

</script>
</html>